/**
 * 户型列表页面特定JavaScript功能
 */

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    // 初始化户型对比功能
    initFloorPlanCompare();
    
    // 初始化筛选选项卡
    initFilterTabs();
});

/**
 * 初始化户型对比功能
 */
function initFloorPlanCompare() {
    // 为每个户型卡片添加复选框
    addCheckboxesToCards();
    
    // 绑定复选框事件
    bindCheckboxEvents();
    
    // 初始化对比按钮状态
    updateCompareCount();
}

/**
 * 为每个户型卡片添加复选框
 */
function addCheckboxesToCards() {
    document.querySelectorAll('.property-card').forEach(card => {
        // 阻止事件冒泡，否则点击checkbox也会触发卡片的点击事件
        card.addEventListener('click', function(e) {
            e.stopPropagation();
        });
        
        // 在每个卡片上添加一个复选框
        const checkbox = document.createElement('div');
        checkbox.className = 'absolute top-2 left-2 bg-white/70 backdrop-blur-sm rounded-full p-1';
        checkbox.innerHTML = `
            <input type="checkbox" class="compare-checkbox w-4 h-4 accent-blue-600">
        `;
        card.querySelector('.relative').appendChild(checkbox);
    });
}

/**
 * 绑定复选框事件
 */
function bindCheckboxEvents() {
    // 复选框点击事件
    document.querySelectorAll('.compare-checkbox').forEach(checkbox => {
        checkbox.addEventListener('click', function(e) {
            e.stopPropagation();
            updateCompareCount();
        });
    });
}

/**
 * 更新对比数量
 */
function updateCompareCount() {
    const count = document.querySelectorAll('.compare-checkbox:checked').length;
    document.querySelector('#compareBtn span').textContent = count;
    
    // 更新按钮状态
    const compareBtn = document.getElementById('compareBtn');
    if (count > 0) {
        compareBtn.classList.add('from-blue-600', 'to-blue-500');
        compareBtn.classList.remove('from-gray-400', 'to-gray-500');
        // 启用跳转链接
        compareBtn.classList.remove('pointer-events-none', 'opacity-70');
    } else {
        compareBtn.classList.remove('from-blue-600', 'to-blue-500');
        compareBtn.classList.add('from-gray-400', 'to-gray-500');
        // 禁用跳转链接
        compareBtn.classList.add('pointer-events-none', 'opacity-70');
    }
}

/**
 * 初始化筛选选项卡
 */
function initFilterTabs() {
    // 筛选选项卡切换
    document.querySelectorAll('.filter-tabs button').forEach(tab => {
        tab.addEventListener('click', function() {
            // 移除所有选项卡的激活状态
            document.querySelectorAll('.filter-tabs button').forEach(t => {
                t.classList.remove('text-blue-600', 'border-b-2', 'border-blue-600', 'font-medium');
                t.classList.add('text-gray-500');
            });
            
            // 设置当前选项卡为激活状态
            this.classList.remove('text-gray-500');
            this.classList.add('text-blue-600', 'border-b-2', 'border-blue-600', 'font-medium');
            
            // 在实际应用中，这里应该筛选展示的户型
            console.log('筛选类型：', this.textContent.trim());
        });
    });
    
    // 高级筛选按钮事件
    document.querySelectorAll('.advanced-filter-button').forEach(btn => {
        btn.addEventListener('click', function() {
            console.log('打开高级筛选：', this.querySelector('span').textContent);
            // 这里应该打开相应的筛选弹窗
        });
    });
} 